<template>
  <div class="yk-cash">
    <van-cell-group>
			<van-cell class="yk-head" value="兑换油卡充值卡" />
		</van-cell-group>
    <section class="card-goods">
      <!-- <van-checkbox-group v-model="checkedGoods"> -->
        <article class="card-goods__item" v-for="item in goods" :key="item.money">
          <van-checkbox v-model="item.checked" @change="getCheckValue(item)"></van-checkbox>
          <van-card
            :title="item.company"
            :desc="'面值：' + item.money"
          >
          <img slot="thumb" :src="item.thumb"/>
          <div slot="tags" class="yk-kucun">库存：{{item.total}}</div>
            <div slot="footer">
              <van-stepper v-model="item.num" :min="1" :max="item.total" :integer="1===1" @change="getTotalPrice(item.num)"/>
            </div>
          </van-card>
        </article>
      <!-- </van-checkbox-group> -->
    </section>
    <van-submit-bar
      :disabled="!checkedGoods.length"
      :button-text="submitBarText"
      @submit="onSubmit"
    >
      <!-- <van-checkbox v-model="checked" @toggle="exchangeSelectAll(checked)">全选</van-checkbox> -->
      <p class="submit-total submit-total-top">合计：{{totalPrice}}</p>
      <p class="submit-total submit-total-bottom">剩余总权益： {{surplus}}</p>
    </van-submit-bar>
  </div>
</template>

<script>
import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from 'vant';
// import ykImg from '../../../assets/img/yk.jpg';
import money50 from '@/assets/img/mony50.jpg';
import money100 from '@/assets/img/money100.jpg';
import money200 from '@/assets/img/money200.jpg';
import money500 from '@/assets/img/money500.jpg';
import money1000 from '@/assets/img/money1000.jpg';
import money2000 from '@/assets/img/money2000.jpg';
import {getOilCount} from './../../../api/rightsInterests';
export default {
  name: 'yk-cash',
  data() {
    return {
      checked: false,
      checkedGoods: [],
      value:'',
      goods: [],
      totalPrice: 0,
      surplus: sessionStorage.getItem('totalRight'),
      checkedParams: [],
      totalRight: sessionStorage.getItem('totalRight'),
      flag: true
    };
  },

  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;
      return '提交' + (count ? `(${count})` : '');
    }
  },
  created() {
    this.getOilCountList();
  },
  methods: {
    onSubmit() {
      this.flag = true;
      const reg = /^[1-9]+$/;
      this.checkedParams.forEach( e=>{
        if(!reg.test(e.num)){
          this.$toast.fail('输入的值仅能为正整数，请重新输入');
          e.num = 1;
          this.flag = false;
          return this.flag;
        }
      })
      if (this.totalPrice > this.totalRight) {
        this.$toast.fail('当前选中的权益已超过您的有效总权益，请重新选择');
        return ;
      } else {
        if (this.flag) {
          this.$router.push({name: 'ykcashSure', query: {paramsObj: JSON.stringify(this.checkedParams), totals: this.totalPrice, surplus: this.surplus}});
        }
      }
    },
    getCheckValue(value) {
      if (value.checked) {
        this.checkedGoods.push(value.money);
      } else {
        if (this.checkedGoods.indexOf(value.money) > -1) {
          this.checkedGoods.splice(this.checkedGoods.indexOf(value.money), 1);
        }
      }
      this.getTotalPrice();
    },
    getTotalPrice(num) {
      let list = [];
      this.checkedParams = [];
      this.totalPrice = 0;
      // num.replace(/\D/g,'');
      // const reg = /^\+?[1-9][0-9]*$/;
      // if (reg.test(num)) {

      // } else {
      //   num = 1;
      //   return;
      // }
      for (let i = 0, j = this.goods.length; i < j; i++) {
        if(this.goods[i].checked) {
          this.totalPrice = this.totalPrice*1 + this.goods[i].money*this.goods[i].num;
          if (this.totalPrice > this.totalRight) {
            this.$toast.fail('当前选中的权益已超过您的有效总权益，请重新选择');
            return ;
          } else {
            this.checkedParams.push(this.goods[i]);
          }
        }
      }

      this.surplus = this.totalRight*1 - this.totalPrice*1;
      console.log(this.totalPrice);
    },
    getOilCountList() {
      getOilCount().then(res => {
        // this.goods = res.data.moneysCounts;
        let json = res.moneysCounts;
        for(let i = 0, j = json.length; i < j; i++) {
          if(json[i].money === 50) {
            json[i].thumb = money50;
          } else if(json[i].money === 100) {
            json[i].thumb = money100;
          } else if(json[i].money === 200) {
            json[i].thumb = money200;
          } else if(json[i].money === 500) {
            json[i].thumb = money500;
          } else if(json[i].money === 1000) {
            json[i].thumb = money1000;
          } else if(json[i].money === 2000) {
            json[i].thumb = money2000;
          }
          json[i].num = 1;
          json[i].checked = false;
        }
        this.goods = json;
      }).catch(error => {
        if (error.status !== 100 && error.status !== 102 ) {
          this.$toast.fail(error.message);
        }
      })
    },
    // exchangeSelectAll(checked) {
    //   this.goods.forEach(e => {
    //     e.checked = this.checked;
    //   });
    //   this.getTotalPrice();
    // }
  }
};
</script>

<style lang="less">
.yk-cash{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  .yk-head{
    text-align: center;
    .van-cell__value--alone{
      text-align: center !important;
      height:25px;
      font-size:18px;
      font-family:PingFang SC;
      font-weight:normal;
      line-height:25px;
      color:rgba(51,51,51,1);
      opacity:1;
    }
  }
  .card-goods {
    padding: 20px 12px;
    height: calc( 100% - 115px );
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    &__item {
      position: relative;
      background-color: #ffffff;
      margin-bottom: 10px;
      padding: 5px 0px;
      border-radius: 6px;
      .van-checkbox__label {
        width: 100%;
        padding: 0 10px 0 15px;
        box-sizing: border-box;
      }

      .van-checkbox__icon {
        top: 50%;
        left: 10px;
        z-index: 1;
        position: absolute;
        margin-top: -10px;
      }

      .van-card__price {
        color: #f44;
      }
      .van-card{
        background: #ffffff !important;
        padding-left: 152px !important;
        margin-left: 25px !important;
        &:not(:first-child){
          margin-top: 0px !important;
        }
        .van-card__thumb{
          width: 126px !important;
          height: 90px;
        }
        .van-card__title{
          font-size:16px;
          font-family:PingFang SC;
          font-weight:300;
          line-height:22px;
          color:rgba(51,51,51,1);
          opacity:1;
        }
        .van-card__desc{
          font-size:12px;
          font-family:PingFang SC;
          font-weight:300;
          line-height:17px;
          color:rgba(255,138,65,1);
          opacity:1;
        }
        .yk-kucun{
          font-size:12px;
          font-family:PingFang SC;
          font-weight:300;
          line-height:17px;
          color:rgba(255,138,65,1);
          opacity:1;
        }
      }
    }
  }
  .van-card__footer{
    left: 152px !important;
    .van-stepper__minus, .van-stepper__plus{
      height: 22px;
      width: 20px;
    }
    .van-stepper__input{
      height: 18px;
      width: 28px;
      font-size: 14px;
    }
  }
  .van-submit-bar__bar{
    padding-left: 20px !important;
    .submit-total{
      font-size: 12px;
      position: absolute;
      right: 126px;
    }
    .submit-total-top{
      top: 5px;
    }
    .submit-total-bottom{
      bottom: 5px;
    }
    .van-button--danger{
      background-color: #FF8A41 !important;
      border: 1px solid #FF8A41 !important;
      right: 20px;
      font-size:14px;
      font-family:PingFang SC;
      font-weight:400;
      line-height:20px;
      color:rgba(255,255,255,1);
      opacity:1;
      height: 38px;
      width: 84px;
      border-radius: 34px;
    }
  }
}
</style>
